import React from "react";
// import Test  from './text'
import { Button } from 'antd'
// 整个类组件
class ChangeMsg extends React.Component {
    // 当前组件的所有内部状态都要放在方法实例属性 state 中
    state = {
        name: '阿唯'
    }
    /**
     * 所有自定义的方法，推荐使用箭头函数，因为里面的this指向的是当前组件的实例对象
     * 如果采用es5的方法定义，则this可能会发生变化
     */

    handleChange = () => {
        // this.state.name = 'new Name' 改了，可以打印出来，但是页面不会刷新
        // console.log('---', this.state.name)
        this.setState({name:'new Name'},() => {
            console.log('该回调函数，会在数据更新且页面更新后执行，可以拿到最新的值', this.state)
        })
    } 
    // 负责渲染当前组件的结构和样式 
    render(){
        return (
            <div>
                my name: <span style={{ color: 'red' }}>{this.state.name}</span>
                <Button onClick={this.handleChange}>修改名字</Button>
            </div>
        )
    }
}

export default ChangeMsg